<script setup lang="ts">
import { ref, toRef } from 'vue'
import useAppStore from '@/store'
import { onChooseImage } from '@/utils/utils';
import { getUserInfo, putMemberfile } from '@/apis/myProfile';
import { userInfoItem } from '@/apis/myProfile';
import { Gender } from '@/apis/myProfile';
import { useMemberStore } from '@/store/member';
import { onLoad, onShow } from '@dcloudio/uni-app';

const appStore = useAppStore()
const safeArea = toRef(appStore, 'safeArea')

const goBack = () => {
  uni.switchTab({ url: '/pages/my/index' })
}

const memberStore = useMemberStore()

onLoad(async () => {
  const res = await getUserInfo()
  // console.log('[ res ]-16', res)
  userInfo.value = res
  // 数据初始化前同步头像和昵称
  userInfo.value.avatar = memberStore.profile.avatar
  userInfo.value.nickname = memberStore.profile.nickname
})

// 获取用户基本信息
// const userInfo = ref<userInfoItem>({} as userInfoItem)
const userInfo = ref({} as userInfoItem)
onShow(() => {
  setTimeout(async () => {
    const res = await getUserInfo()
    // console.log('[ res ]-16', res)
    userInfo.value = res
  }, 1000)

  // // 数据初始化前同步头像和昵称
  // userInfo.value.avatar = memberStore.profile.avatar
  // userInfo.value.nickname = memberStore.profile.nickname
})


// 日期开始时间，日期结束时间优化
const getDate = (type: string) => {
  const date = new Date()
  let year = date.getFullYear()
  let month = String(date.getMonth() + 1)
  let day = String(date.getDate())

  if (type === 'start') {
    year = year - 60;
  } else if (type === 'end') {
    year = year
  }
  // month = month > 9 ? month : '0' + month;
  // day = day > 9 ? day : '0' + day;

  return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
}

// 选择日期
const selectedDate = (e: WechatMiniprogram.PickerChange) => userInfo.value.birthday = e.detail.value as string
// 选择城市
let fullCode: string[] = []
let fullVal: string[] = []
const selectedCity = (e: WechatMiniprogram.PickerChange) => {
  const { value, code } = e.detail
  fullVal = value as string[]
  // 城市名称区域
  userInfo.value.fullLocation = fullVal.join(' ')
  // 城市编码
  fullCode = code
}
// 选择性别
const selectedGender = (e: WechatMiniprogram.RadioGroupChange) => userInfo.value.gender = e.detail.value as Gender
// 点击保存按钮修改个人信息
const onSave = async () => {
  const { birthday, nickname, gender, profession } = userInfo.value
  // 调接口去保存修改后的数据
  await putMemberfile({
    birthday,
    nickname,
    gender,
    profession,
    cityCode: fullCode[1],
    provinceCode: fullCode[0],
    countyCode: fullCode[2]
  })
  // 提示用户修改信息成功
  uni.showToast({ icon: 'success', title: '修改信息成功！' })
  // 修改后的昵称更新---个人中心页面
  memberStore.profile.nickname = userInfo.value.nickname
  // 后退返回上一页
  // uni.navigateBack({})
  uni.switchTab({ url: '/pages/my/index' })
}

</script>

<template>
  <view class="viewport" v-if="userInfo">
    <view class="navbar" :style="{ paddingTop: safeArea?.top + 'px' }">
      <view class="back icon-left" @tap="goBack"></view>
      <view class="title">个人信息</view>
    </view>
    <scroll-view scroll-y>
      <!-- 头像 -->
      <view class="avatar">
        <image @tap="onChooseImage('avatar')" :src="userInfo.avatar" />
        <text>点击修改头像</text>
      </view>
      <!-- 用户信息 -->
      <view class="form">
        <view class="form-item">
          <text class="label">账号</text>
          <text>{{ userInfo.account || '请输入账号' }}</text>
        </view>
        <view class="form-item">
          <text class="label">昵称</text>
          <input v-model="userInfo.nickname" />
        </view>
        <view class="form-item">
          <text class="label">性别</text>
          <radio-group @change="selectedGender">
            <label class="radio">
              <radio value="男" color="#27ba9b" :checked="userInfo.gender === '男'" />男
            </label>
            <label class="radio">
              <radio value="女" color="#27ba9b" :checked="userInfo.gender === '女'" /> 女
            </label>
          </radio-group>
        </view>
        <view class="form-item">
          <text class="label">出生日期</text>
          <picker mode="date" :start="getDate('start')" :end="getDate('end')" @change="selectedDate">
            <view>{{ userInfo.birthday || '请选择日期' }}</view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">城市</text>
          <picker mode="region" @change="selectedCity">
            <view>{{ userInfo.fullLocation || '请选择城市' }}</view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">职业</text>
          <input v-model="userInfo.profession" placeholder="请填写职业" />
        </view>
      </view>
      <!-- 提交按钮 -->
      <view class="button" @tap="onSave">保 存</view>
    </scroll-view>
  </view>
</template>

<style>
page {
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;
}

.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/order_bg.png);
  background-size: auto 392rpx;
  background-repeat: no-repeat;
}

.navbar .title {
  height: 40px;
  line-height: 32px;
  text-align: center;
  font-size: 17px;
  font-weight: 500;
  color: #fff;
}

.navbar .back {
  position: absolute;
  left: 20rpx;
  top: 22px;
  font-size: 23px;
  z-index: 9;
  color: #fff;
}

.avatar {
  text-align: center;
  padding: 20rpx 0 40rpx;
}

.avatar image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
}

.avatar text {
  display: block;
  padding-top: 20rpx;
  line-height: 1;
  font-size: 26rpx;
  color: #fff;
}

.form {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
}

.form .form-item {
  display: flex;
  height: 96rpx;
  line-height: 46rpx;
  padding: 25rpx 10rpx;
  background-color: #fff;
  font-size: 28rpx;
  border-bottom: 1rpx solid #ddd;
}

.form .form-item:last-child {
  border: none;
}

.form .form-item .label {
  width: 180rpx;
  color: #333;
}

.form .form-item input {
  flex: 1;
  display: block;
  height: 46rpx;
}

.form .form-item .radio {
  display: inline-block;
  height: 46rpx;
  margin-right: 20rpx;
  vertical-align: middle;
}

.form .form-item radio {
  transform: scale(0.7) translateY(-2px);
}

.form .form-item picker {
  flex: 1;
}

.button {
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>
